<template>
  <div class="detection-record-demo">
    <div class="demo-header">
      <h2>检测记录卡片演示</h2>
      <p>基于 DeviceGrid 数据的文字版设备状态轮播</p>
      <div class="demo-controls">
        <el-button @click="toggleComponent" type="primary">
          切换到{{ showDetectionCard ? '原始监测记录' : '检测记录卡片' }}
        </el-button>
        <el-button @click="simulateFault" type="danger">模拟故障</el-button>
        <el-button @click="resetStatus" type="success">重置状态</el-button>
      </div>
    </div>
    
    <div class="demo-content">
      <div class="demo-left">
        <!-- 检测记录卡片 -->
        <DetectionRecordCard
          v-if="showDetectionCard"
          :unique-lathe-names="mockLatheNames"
          :get-lathe-name-status="getLatheNameStatus"
          :lathe-name-summaries="mockLatheNameSummaries"
          :current-device="mockCurrentDevice"
          @select-device="handleSelectDevice"
          @inquiry-from-device="handleInquiryFromDevice"
        />
        
        <!-- 原始监测记录 -->
        <MonitorLog
          v-else
          :monitor-logs="mockMonitorLogs"
          :lathe-names-to-animate="new Set()"
          @inquiry-from-log="handleInquiryFromLog"
        />
      </div>
      
      <div class="demo-right">
        <div class="demo-info">
          <h3>功能特点</h3>
          <ul>
            <li>✅ 基于 DeviceGrid 的设备数据结构</li>
            <li>✅ 文字版设备状态轮播显示</li>
            <li>✅ 实时状态指示器（正常/故障/待机/离线）</li>
            <li>✅ 故障设备闪烁提醒</li>
            <li>✅ AI 问询按钮（仅故障设备显示）</li>
            <li>✅ 设备选择功能</li>
            <li>✅ 状态统计汇总</li>
            <li>✅ 平滑轮播动画</li>
          </ul>
          
          <h3>当前状态</h3>
          <div class="status-display">
            <div class="status-item">
              <span class="status-label">正常设备:</span>
              <span class="status-value normal">{{ statusCounts.normal }}</span>
            </div>
            <div class="status-item">
              <span class="status-label">故障设备:</span>
              <span class="status-value error">{{ statusCounts.error }}</span>
            </div>
            <div class="status-item">
              <span class="status-label">待机设备:</span>
              <span class="status-value warning">{{ statusCounts.warning }}</span>
            </div>
            <div class="status-item">
              <span class="status-label">离线设备:</span>
              <span class="status-value offline">{{ statusCounts.offline }}</span>
            </div>
          </div>
          
          <h3>操作日志</h3>
          <div class="operation-log">
            <div v-for="(log, index) in operationLogs" :key="index" class="log-entry">
              {{ log }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DetectionRecordCard from './DetectionRecordCard.vue'
import MonitorLog from './MonitorLog.vue'

export default {
  name: 'DetectionRecordDemo',
  components: {
    DetectionRecordCard,
    MonitorLog
  },
  data() {
    return {
      showDetectionCard: true,
      operationLogs: [],
      
      // 模拟数据
      mockLatheNames: [
        '设备01', '设备02', '设备03', '设备04', '设备05',
        '设备06', '设备07', '设备08', '设备09', '设备10'
      ],
      
      mockDeviceStatuses: {
        '设备01': '正常',
        '设备02': '正常', 
        '设备03': '故障',
        '设备04': '待机',
        '设备05': '正常',
        '设备06': '离线',
        '设备07': '正常',
        '设备08': '待机',
        '设备09': '正常',
        '设备10': '正常'
      },
      
      mockLatheNameSummaries: {},
      
      mockCurrentDevice: {
        id: 30096546,
        name: '设备01',
        latheName: '设备01'
      },
      
      mockMonitorLogs: []
    };
  },
  
  computed: {
    statusCounts() {
      const counts = { normal: 0, error: 0, warning: 0, offline: 0 };
      
      Object.values(this.mockDeviceStatuses).forEach(status => {
        switch (status) {
          case '正常':
            counts.normal++;
            break;
          case '故障':
            counts.error++;
            break;
          case '待机':
            counts.warning++;
            break;
          case '离线':
            counts.offline++;
            break;
        }
      });
      
      return counts;
    }
  },
  
  created() {
    this.initializeMockData();
  },
  
  methods: {
    initializeMockData() {
      // 初始化设备汇总数据
      this.mockLatheNames.forEach(latheName => {
        this.mockLatheNameSummaries[latheName] = {
          status: this.mockDeviceStatuses[latheName],
          collectTime: new Date().toISOString()
        };
      });
      
      // 初始化监测记录
      this.mockMonitorLogs = this.mockLatheNames.map((latheName, index) => ({
        id: index + 1,
        deviceName: latheName,
        status: this.mockDeviceStatuses[latheName],
        createTime: new Date(Date.now() - Math.random() * 3600000).toISOString()
      }));
      
      this.addOperationLog('系统初始化完成');
    },
    
    getLatheNameStatus(latheName) {
      return this.mockDeviceStatuses[latheName] || '离线';
    },
    
    toggleComponent() {
      this.showDetectionCard = !this.showDetectionCard;
      this.addOperationLog(`切换到${this.showDetectionCard ? '检测记录卡片' : '原始监测记录'}`);
    },
    
    simulateFault() {
      // 随机选择一个正常设备设为故障
      const normalDevices = this.mockLatheNames.filter(name => 
        this.mockDeviceStatuses[name] === '正常'
      );
      
      if (normalDevices.length > 0) {
        const randomDevice = normalDevices[Math.floor(Math.random() * normalDevices.length)];
        this.mockDeviceStatuses[randomDevice] = '故障';
        this.mockLatheNameSummaries[randomDevice].status = '故障';
        this.mockLatheNameSummaries[randomDevice].collectTime = new Date().toISOString();
        
        this.addOperationLog(`模拟 ${randomDevice} 发生故障`);
      } else {
        this.addOperationLog('没有正常设备可以模拟故障');
      }
    },
    
    resetStatus() {
      // 重置所有设备为正常状态
      this.mockLatheNames.forEach(latheName => {
        this.mockDeviceStatuses[latheName] = '正常';
        this.mockLatheNameSummaries[latheName].status = '正常';
        this.mockLatheNameSummaries[latheName].collectTime = new Date().toISOString();
      });
      
      this.addOperationLog('所有设备状态已重置为正常');
    },
    
    handleSelectDevice(latheName) {
      this.mockCurrentDevice.latheName = latheName;
      this.mockCurrentDevice.name = latheName;
      this.addOperationLog(`选择设备: ${latheName}`);
    },
    
    handleInquiryFromDevice(deviceInfo) {
      this.addOperationLog(`从检测记录卡片问询设备: ${deviceInfo.deviceName} (状态: ${deviceInfo.status})`);
    },
    
    handleInquiryFromLog(log) {
      this.addOperationLog(`从监测记录问询设备: ${log.deviceName}`);
    },
    
    addOperationLog(message) {
      const timestamp = new Date().toLocaleTimeString();
      this.operationLogs.unshift(`[${timestamp}] ${message}`);
      
      // 保持最多20条日志
      if (this.operationLogs.length > 20) {
        this.operationLogs = this.operationLogs.slice(0, 20);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.detection-record-demo {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;

  .demo-header {
    text-align: center;
    margin-bottom: 30px;
    
    h2 {
      color: #333;
      margin-bottom: 10px;
    }
    
    p {
      color: #666;
      margin-bottom: 20px;
    }
    
    .demo-controls {
      display: flex;
      justify-content: center;
      gap: 15px;
    }
  }

  .demo-content {
    display: flex;
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto;

    .demo-left {
      flex: 1;
      height: 600px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .demo-right {
      width: 400px;
      
      .demo-info {
        background: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        
        h3 {
          color: #333;
          margin-bottom: 15px;
          border-bottom: 2px solid #409eff;
          padding-bottom: 5px;
        }
        
        ul {
          margin-bottom: 25px;
          
          li {
            margin-bottom: 8px;
            color: #666;
          }
        }
        
        .status-display {
          margin-bottom: 25px;
          
          .status-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            
            .status-label {
              color: #666;
            }
            
            .status-value {
              font-weight: bold;
              padding: 2px 8px;
              border-radius: 4px;
              
              &.normal {
                color: #4CAF50;
                background: rgba(76, 175, 80, 0.1);
              }
              
              &.error {
                color: #FF5722;
                background: rgba(255, 87, 34, 0.1);
              }
              
              &.warning {
                color: #FF9800;
                background: rgba(255, 152, 0, 0.1);
              }
              
              &.offline {
                color: #9E9E9E;
                background: rgba(158, 158, 158, 0.1);
              }
            }
          }
        }
        
        .operation-log {
          max-height: 200px;
          overflow-y: auto;
          border: 1px solid #eee;
          border-radius: 4px;
          padding: 10px;
          background: #fafafa;
          
          .log-entry {
            font-size: 12px;
            color: #666;
            margin-bottom: 5px;
            padding: 2px 0;
            border-bottom: 1px solid #f0f0f0;
            
            &:last-child {
              border-bottom: none;
            }
          }
        }
      }
    }
  }
}
</style>
